<template>
  <div class="wrap" >
    <headerPrint type="CAP"/>
    <div id="printWrapId" class="print">
      <div class="tLogo"><img class="logo" src="~images/icon.jpg" alt=""></div>
      <div class="title-wrap">
        <p class="name">固定资产验收单</p>
        <p class="name-en">Fixed Asset Acceptance Form</p>
      </div>
      <div class="head-wrap">
        <div class="left">
          <div class="item">
            <span>Department:</span><span class="line">{{ cap.department }}</span>
          </div>
          <div class="item">
            <span>Cost Center:</span><span class="line bold">{{ cap.costCenter }}</span>
          </div>
        </div>
        <div class="right">
          <div class="item" style="opacity: 0;">
            <span>1:</span><span class="line"></span>
          </div>
          <div class="item">
            <span>Location of Assets Installed/Used:</span><span class="line">{{ cap.locationOfAssetsInstalled }}</span>
          </div>
        </div>
      </div>
      <div class="bg-head" style="margin-top: 15px;">
        <span>Asset information</span>
      </div>
      <ul class="info-wrap">
        <li>
          <span class="label">Brand:</span>
          <span class="ipt" style="width: 180px;">{{ cap.brand }}</span>
        </li>
        <li>
          <span class="label">Model:</span>
          <span class="ipt" style="width: 180px;">{{ cap.model }}</span>
        </li>
        <li>
          <span class="label">Others:</span>
          <span class="ipt" style="width: 120px;">{{ cap.others }}</span>
        </li>
      </ul>
      <div style="padding-top: 20px;">
        <span class="label label1">a) Asset No.</span>
        <span class="iptLine">{{ info.assetNo }}</span>
      </div>
      <div class="ipt-content-wrap" style="padding-top: 20px;">
        <div class="label"><span>b) Category:</span></div>
        <ul>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.cagegory,'Land & Building')}"></span>
            <span class="label">Land & Building</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.cagegory,'Machines and Equipment')}"></span>
            <span class="label">Machines and Equipment</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.cagegory,'Computer Hardware (IT Infrastructure)')}"></span>
            <span class="label">Computer Hardware (IT Infrastructure)</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.cagegory,'Computer Software')}"></span>
            <span class="label">Computer Software</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.cagegory,'Other Software')}"></span>
            <span class="label">Other Software</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.cagegory,'Other Equipment（include Tooling)')}"></span>
            <span class="label">Other Equipment（include Tooling)</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.cagegory,'Other Intangible Assets')}"></span>
            <span class="label">Other Intangible Assets</span>
          </li>
        </ul>
      </div>
      <div class="ipt-content-wrap" style="padding-top: 20px;">
        <div class="label"><span>c) Category:</span></div>
        <ul>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.acquisitionMethodCCD,'Self-built')}"></span>
            <span class="label">Self-built</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.acquisitionMethodCCD,'Purchased ')}"></span>
            <span class="label">Purchased </span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveCurrent(cap.acquisitionMethodCCD,'Other')}"></span>
            <span class="label">Other</span>
            <span class="iptLine" style="vertical-align: bottom;"></span>
          </li>
        </ul>
      </div>
      <div class="ipt-content-wrap table-list" style="padding-top: 20px;">
        <div>
          <span class="label">d) Monetory Value</span><span style="margin-left: 10px;">(Individual Asset description, quantity and type (large metal or small sticky) of tag needed.)</span>
        </div>
        <ul class="table">
          <li class="label">Items</li>
          <li class="label">Description</li>
          <li class="label">Type</li>
          <li class="label">Vendor</li>
          <li class="label">Quantity</li>
          <li class="label">Currency</li>
          <li class="label" style="text-decoration: underline;">Quotation Cost</li>
        </ul>
        <ul class="table" v-for="(item,index) in capList" :key="index">
          <li>{{ index + 1 }}</li>
          <li class="ipt">{{ item.description }}</li>
          <li class="ipt">{{ item.type }}</li>
          <li class="ipt">{{ item.vendor }}</li>
          <li class="ipt">{{ item.quantity }}</li>
          <li class="ipt">{{ item.currency }}</li>
          <li class="ipt">{{ item.quotationCost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}</li>
        </ul>
        <div class="end-wrap">
          <span class="label">Total Capital without tax:</span>
          <span class="number">{{ formatQuotationCost() }}</span>
        </div>
      </div>
      <div class="ipt-content-wrap" style="padding-top: 20px;">
        <div class="label"><span>e) Appendix:</span></div>
        <ul style="padding-left: 40px">
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveCurrent(cap.appendix,'CAPEX Application')}"></span>
            <span class="label">CAPEX Application</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveCurrent(cap.appendix,'Purchase Order')}"></span>
            <span class="label">Purchase Order</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveCurrent(cap.appendix,'Purchase Contract')}"></span>
            <span class="label">Purchase Contract</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.appendix,'Final Settlement Report')}"></span>
            <span class="label">Final Settlement Report</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.appendix,'Certificate of qualification')}"></span>
            <span class="label">Certificate of qualification</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveCurrent(cap.appendix,'Others')}"></span>
            <span class="label">Others</span>
          </li>
        </ul>
      </div>
      <div class="bg-head" style="margin-top: 15px;">
        <span>Acceptance information</span>
      </div>
      <div style="padding-top: 20px;">
        <span class="label label1">Date of Acceptance</span>
        <span class="iptLine">{{ $moment(cap.dateOfAcceptance).format('YYYY-MM-DD') }}</span>
      </div>
      <div class="ipt-content-wrap tb-wrap" style="padding-top: 20px;">
        <div class="label label-title"><span>Concluison:</span></div>
        <ul>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.concluison,'Accepted, Meet requirements')}"></span>
            <span class="label">Accepted, Meet requirements</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.concluison,'Not meet requirements, need retrofitr')}"></span>
            <span class="label">Not meet requirements, need retrofit</span>
          </li>
          <li class="bp2">
            <span class="radio-br"
                  :class="{selectActive: isActiveCurrent(cap.concluison,'Not meet requirements,need to return')}"></span>
            <span class="label">Not meet requirements,need to return</span>
          </li>
        </ul>
      </div>
      <div class="text-p-wrap">
        <div class="left">
          <span class="label">Description of asset acceptance:</span>
        </div>
        <div class="right">
          <span class="label">Signature of the acceptance personnel:</span>
        </div>
      </div>
      <table border="1" width="100%" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="14" style="height: 120px">
            <p>
              符合要求，已经于{{$moment(cap.dateOfAcceptance).format('YYYY')}}年{{$moment(cap.dateOfAcceptance).format('MM')}}月{{$moment(cap.dateOfAcceptance).format('DD')}}日验收使用。
            </p>
            <p>
              参与验收人员，{{ cap.acceptancePersonnelName }}）
            </p>
          </td>
          <td colspan="10">
            <div class="signPathWraps">
                <approvalSingleUser style="top: 38px" v-for="(item,index) in info.capitalizationacceptancePersonnelApprovals" :key="index" :list="info.capitalizationacceptancePersonnelApprovals" :progressCode="item.progressCode"></approvalSingleUser>

<!--                <img style="height: 40px;width:80px;" v-for="(item,index) in info.capitalizationacceptancePersonnelApprovals" :src="util.filePathToUrl(item.signPath)" alt="" :key="index">-->
            </div>
          </td>
        </tr>
      </table>
      <div class="bg-head" style="margin-top: 15px;">
        <span>Approval information</span>
      </div>
      <div class="ipt-content-wrap department">
        <ul class="info-wrap-write">
          <li style="margin-left: 60px;margin-right: 220px;padding-bottom: 20px">
            <span class="label">Accepted by</span>
            <span class="ipt" style="width: 120px;padding-top: 20px;">
<!--              <img height="40px" width="80px" :src="getCurrentUser(partakePersonal,null)['signPath']"/>-->
                {{apitalization.submitByStr}}
            </span>
            <span class="label">Date:{{apitalization['submitTime']}}</span>
          </li>
          <li style="margin-right: 220px">
            <span class="label">Attested by </span>
            <span class="ipt" style="width: 180px;text-align: center">
<!--              <img height="40px" width="80px" :src="getCurrentUser(userList,'User')['signPath']"/>-->
<!--                <approvalSingleUser  :list="info.capitalizationApprovals" progressCode="User"></approvalSingleUser>-->
                <approvalSingleUser v-for="(item,index) in info.capitalizationacceptancePersonnelApprovals" :key="index" :list="info.capitalizationacceptancePersonnelApprovals" :progressCode="item.progressCode"></approvalSingleUser>

            </span>
            <span class="label">Date:{{info.capitalizationacceptancePersonnelApprovals[info.capitalizationacceptancePersonnelApprovals.length-1]['createTime']}}</span>
          </li>

          <li>
            <span class="label">Approved</span>
            <span class="ipt" style="width: 180px;">
<!--              <img height="40px" width="80px" :src="getCurrentUser(userList,'Project HoD')['signPath']"/>-->
<!--              <img height="40px" width="80px" :src="getCurrentUser(userList,'User HoD')['signPath']"/>-->
                <approvalSingleUser :list="info.capitalizationApprovals" progressCode="Project HoD"></approvalSingleUser>
                <approvalSingleUser style="margin-left: 10px" :list="info.capitalizationApprovals" progressCode="User HoD"></approvalSingleUser>
            </span>
            <span class="label">Date:{{getApprovalUserInfo(info.capitalizationApprovals,'User HoD')['createTime']}}</span>
          </li>
        </ul>
      </div>
      <p class="desc" style="padding-top: 20px;">
        Note:<br/>
        1. Direct use and purchasing department shall participat in the acceptance inspection generally;<br/>
        2. The attestor is a person involved in the acceptance of assets; The authorizer is the person in charge of the
        cost center and head of operation BU;<br/>
        3. This acceptance form is applicable to general assets, such as tools, small equipment and office equipment, or<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a). Invite relevant departments for special asstes such as infrastructure
        projects, decoration, etc., and the project acceptance report or settlement report shall prevail;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b). for large-scale production equipment, the Final Settlement Report shall
        prevail.<br/>
      </p>
    </div>

  </div>
</template>

<script>
import headerPrint from './header.vue'
import mixins from "@/views/devBasic/capex/print/mixins";
import approvalSingleUser from "@/views/devBasic/capex/print/approvalSingleUser.vue";
export default {
  name: "fixedAssetPrint",
  mixins: [mixins],
  components: {headerPrint,approvalSingleUser},
  data() {
    return {
      info: this.$store.state.capex['CAP'+this.$route.query.id],
      cap: {},
      capList: [],
      userList: [],
      partakePersonal:[],
      userModelList:[],
        apitalization:{}
    }
  },
  //
  async created() {
    this.cap = this.info.capexCapitalizationInfoDTO;
    this.capList = this.info.capexCapitalizationDetails;
  /*  const userList = await this.getApproval(this.info.id, ['Capitalization', 'Capitalization Approval'])
    this.userList = userList
    this.partakePersonal = userList.filter(item=> item.progressCode ==='Capitalization')
    this.userModelList = (this.partakePersonal[0] || {}).userModelList || []*/
      this.apitalization = this.getCurrentApproval(this.info.flows,'Capitalization')

    this.$forceUpdate()
  },
  methods: {
    isActiveCurrent(str1, str2) {
      return str1 == str2
    },
    formatQuotationCost() {
      let total = 0
      this.capList.forEach(item => {
        if (item.quantity && item.currency) {
          item.quotationCost = item.quantity * item.currency
        } else {
          item.quotationCost = ""
        }
        total = total + (item.quotationCost || 0)
      })

      return String(total).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },

  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";

.print {
  padding: 50px 32px 32px 32px;
  width: 1200px;
}

.tLogo {
  position: absolute !important;
  display: inline-block;
  left: initial;
  top: 50px;
  right: 55px;
}

.title-wrap {
  width: 100%;
  text-align: center;
  font-family: SimSun;
  .name {
    font-weight: 600;
    font-size: 19px;
    line-height: 40px;
  }

  .name-en {
    font-weight: 600;
    font-size: 14px;
    //margin-left: 55px;
    margin-top: 3px;
    line-height: 0;
  }
}

.head-wrap {
  .left {
    display: inline-block;
  }

  .right {
    display: inline-block;
    float: right;
    vertical-align: bottom;
    padding-right: 80px;
  }

  .line {
    border-bottom: #333 solid 1px;
    height: 20px;
    vertical-align: text-bottom;
    width: 120px;
    display: inline-block;
    margin-left: 10px;
  }

}

.bg-head {
  background: rgba(217, 217, 217, 1) !important;
  -webkit-print-color-adjust: exact;

  span {
    padding-left: 3px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: underline;
    color: #333333;
  }
}

.label {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 20px;
  padding: 0;
  margin: 0;
  border: none;
}

.info-wrap {
  margin-top: 17px;

  li {
    display: inline-block;
    vertical-align: top;
    padding-bottom: 0;
    margin-right: 120px;

    &:last-child {
      margin-right: 0;
    }

    span {
      display: block;
      text-align: left;
    }

    .label {
      height: 20px;
      display: inline-block;
      margin-right: 65px;
      font-weight: normal;
    }

    .ipt {
      width: 180px;
      border-bottom: #333333 solid 1px;
      font-size: 13px;
      color: #333333;
      display: inline-block;
      font-weight: bold;
      padding-left: 3px;
      box-sizing: border-box;
      height: 22px;
      line-height: 22px;
    }
  }
}

.iptLine {
  width: 180px;
  border-bottom: #333333 solid 1px;
  font-size: 13px;
  color: #333333;
  display: inline-block;
  font-weight: bold;
  padding-left: 3px;
  box-sizing: border-box;
  height: 22px;
  line-height: 22px;
  text-align: center;
}

.label1 {
  text-align: left;
  width: 106px;
}

.ipt-content-wrap {
  ul {
    padding: 7px 0 0 0;
  }

  li {
    display: inline-block;
    //padding-right: 90px;
    padding-bottom: 7px;
    vertical-align: top;

    &.bp {
      width: 208px;
    }

    &.bp1 {
      width: 262px;
    }

    &.bp2 {
      width: 365px;
    }

    .radio-br {
      width: 60px;
      height: 20px;
      border: #333 solid 1px;
      display: inline-block;
      vertical-align: bottom;
      margin-right: 3px;
    }


  }
}

.table-list {
  //border: #333 solid 1px;
  margin-top: 5px;

  .table {
    padding-left: 5px;
    margin-bottom: 0;
    padding-top: 0;
    margin-top: 0;
    padding-top: 0;

    li {
      color: #333333;
      display: inline-block;
      margin-right: 30px;
      border-radius: 0;

      &:last-child {
        margin-right: 0;
      }

      &:nth-child(1) {
        width: 35px;
        text-align: left;
      }

      &:nth-child(2) {
        width: 120px;
        text-align: left;
      }

      &:nth-child(3) {
        width: 180px;
      }

      &:nth-child(4) {
        width: 360px;
      }

      &:nth-child(5) {
        width: 60px;
        text-align: right;
      }

      &:nth-child(6) {
        width: 60px;
        text-align: right;
      }

      &:nth-child(7) {
        width: 120px;
        text-align: right;
      }

      &.ipt {
        //border-bottom: #333 solid 1px;
        padding-bottom: 1px;
        font-size: 14px;
      }
    }

  }

  .info-wrap {
    margin: 5px;
    padding-top: 0;

    li {
      display: inline-block;
      //width: 180px;
      vertical-align: bottom;
      margin-right: 200px;
      padding-bottom: 0;

      &:last-child {
        margin-right: 0;
      }

      span {
        display: block;
        text-align: left;
      }

      .ipt {
        width: 180px;
        border-bottom: #333333 solid 1px;
        font-size: 13px;
        color: #333333;
        display: inline-block;
        font-weight: bold;
        padding-left: 3px;
        box-sizing: border-box;
        padding-top: 35px;
        height: 20px;
      }
    }
  }
}

.end-wrap {
  text-align: right;
  padding-right: 14px;
   padding-top: 20px;
  .number {
    border-top: #333333 solid 1px;
    border-bottom: #333333 solid 1px;
    width: 120px;
    display: inline-block;
    margin-left: 40px;
    position: relative;
  }
  .number::before{
    content: '';
    width: 120px;
    border: #333333 solid 1px;
    position: absolute;
    top: 24px;
    right: 0;
  }
}

.tb-wrap {
  .label-title {
    display: inline-block;
    margin-right: 60px;
  }

  ul {
    display: inline-block;
    vertical-align: top;
    padding-top: 0;

    li {
      display: block;
    }
  }
}

.text-p-wrap {
  .left {
    display: inline-block;
    width: 720px;
  }

  .right {
    display: inline-block;
  }
}

.info-wrap-write {
  padding-top: 20px !important;
  border: #333 solid 1px;

  li {
    display: inline-block;
    width: 180px;
    vertical-align: top;
    padding-bottom: 0;

    span {
      display: block;
      text-align: left;
    }

    .label {
      height: 20px;
    }

    .ipt {
      width: 180px;
      border-bottom: #333333 solid 1px;
      font-size: 13px;
      color: #333333;
      display: inline-block;
      font-weight: bold;
      padding-left: 3px;
      box-sizing: border-box;
      margin-top: 20px;
      height: 40px;
      //line-height: 22px;
    }
  }
}
</style>
